<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta content="telephone=no,email=no" name="format-detection">
<meta name="wap-font-scale" content="no">
<title>订单填写</title>
<!-- 公用样式css -->
<link href="css/base.css" rel="stylesheet" type="text/css" />
<!-- 界面引入css -->
<link href="css/interests-member.css" rel="stylesheet" type="text/css" />
<!-- ui框架引入css -->
<link href="css/weui.min.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-weui.min.css" rel="stylesheet" type="text/css" />
<style>
.contactInput{ outline: none; -webkit-appearance: none; border-radius: 0; border:0px;}
.am-share { font-size: 14px; border-radius: 0; bottom: 0; left: 0; position: fixed; text-align: center; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 300ms; transition: transform 300ms ; width: 100%; z-index: 1110; }
.am-modal-active { transform: translateY(0px);  -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) }
.am-modal-out { z-index: 1109; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%) }
.am-share-title { background-color: #f8f8f8; border-bottom: 1px solid #fff; border-top-left-radius: 2px; border-top-right-radius: 2px; color: #555; font-weight: 400; margin: 0 10px; padding: 10px 0 0; text-align: center; }
.am-share-title::after { border-bottom: 1px solid #dfdfdf; content: ""; display: block; height: 0; margin-top: 10px; width: 100%; }
.am-share-footer { margin: 10px; }
.am-share-footer .share_btn { color: #555;  display: block; width: 100%; background-color: #e6e6e6; border: 1px solid #e6e6e6; border-radius: 0; cursor: pointer;  font-size: 16px; font-weight: 400; line-height: 1.2; padding: 0.625em 0; text-align: center; transition: background-color 300ms ease-out 0s, border-color 300ms ease-out 0s; vertical-align: middle; white-space: nowrap;font-family:"微软雅黑";  }
.am-share-sns { background-color: #f8f8f8; border-radius: 0 0 2px 2px; margin: 0 10px; padding-top: 15px; height:auto; zoom:1; overflow:auto; }
.am-share-sns>li{ padding:0 10px; border-bottom:1px solid #eee; height:auto; overflow:hidden;}
.sharebg { background-color: rgba(0, 0, 0, 0.6); bottom: 0; height: 100%; left: 0; opacity: 0; position: fixed; right: 0; top: 0; width: 100%; display:none; }
.sharebg-active { opacity: 1; display:block; }
.frame_div{position: absolute;width: 80%; height:80%;z-index: 999;display:none;left:10%;top:10%;background-color: #fff;}
.frame_div_back{position: absolute;width: 100%; height:100%;z-index: 998;display:none;left:0;top:0;background-color: #000;opacity:0.5;line-height:500px;color:#fff;text-align:center;font-size:16px;}
.div_frame{width:100%;height:100%;border:0px;display:none;}
.bottom-t{ margin-bottom:40px;}
</style>
</head>

<body>
<%-- 	<header class="header">
        <div class="header-left" onclick="_back()"><img class="img-home" src="images/return.png" onclick=""/></div>
        <div class="header-center word5 "><a class="header-arrow">订单填写</a></div>
        <div class="header-right marg1"></div>
    </header> --%>
	<div class="main" style="background:#fbfbfb;padding-bottom:50px;">
		<ul class="order-detail marg4">
			<li><span class="word5">${hotleName}</span></li>
			<li><span class="word4">${roomName}</span></li>
			<li class="wor-colour1"><span>${startDate}</span><span>-</span><span>${endDate}</span><span>&nbsp;共</span><span class="wor-colour4" id="nightNumSpan">${nightNum}</span><span>晚</span></li>
		</ul>
        <div class="word7 ts-bj"><img src="images/icon18.png" class="icon-img" /><span class="word-tsxx word3 wor-colour7">${OrderFilling.ChancelPolicy}</span></div>
        <ul class="interests marg4">
             <img class="interest-img1" src="images/icon19.png" />
             <li><img class="interest-img2" src="images/icon10.png"/><p>消费赠券</p></li>
             <li><img class="interest-img2" src="images/icon11.png"/><p>积分奖励</p></li>
             <li><img class="interest-img2" src="images/icon8.png"/><p>消费赠券</p></li>
        </ul>
  		<ul class="entry">
         	<li class="float-l"><span class="word4">房间数</span></li>
            <li class="float-r"><span id="between1" class="between" onclick="roomNum(1)">1</span>
            <span id="between2" class="between1" onclick="roomNum(2)">2</span>
            <span id="between3" class="between1" onclick="roomNum(3)">3</span></li>
        </ul>
        <div id="contactDiv" style="widht:100%">
	        <ul class="entry" id="contactDiv1"> 
	         	<li class="float-l"><span class="word4">入住人</span></li>
	            <li class="float-r"><input type="text" value="${OrderFilling.ContactName}" placeholder="入住人姓名，1房间填1人" class="contactInput contactUser" id="contactInput1"/>
	            <a href="#" onclick="_showOccFrameDiv(1);return false;"><img src="images/icon20.png" width="25" height="25" /></a>
	            </li>
	        </ul>
	        <ul class="entry" id="contactDiv2" style="display:none">
	         	<li class="float-l"><span class="word4">入住人</span></li>
	            <li class="float-r"><input type="text" value="" placeholder="入住人姓名，1房间填1人" class="contactInput contactUser" id="contactInput2"/>
	            <a href="#" onclick="_showOccFrameDiv(2);return false;"><img src="images/icon20.png" width="25" height="25" /></a>
				</li>
			</ul>
	        <ul class="entry" id="contactDiv3" style="display:none">
	         	<li class="float-l"><span class="word4">入住人</span></li>
	            <li class="float-r"><input type="text" value="" placeholder="入住人姓名，1房间填1人" class="contactInput contactUser" id="contactInput3"/>
	            <a href="#" onclick="_showOccFrameDiv(3);return false;"><img src="images/icon20.png" width="25" height="25" /></a>
				</li>
	        </ul>
        </div>
        <ul class="entry">
         	<li class="float-l"><span class="word4">联系号码</span></li>
            <li class="float-r"><input type="text" value="${OrderFilling.ContactPhone}" maxlength="11" placeholder="请输入联系方式" class="contactInput" id="contactPhoneInput"/><img src="images/icon21.png" width="25" height="25" /></li>
        </ul>
        <div class="discount-all">
         	<span class="switch-button">优惠选择</span><span class="switch-explain word3 wor-colour1">各优惠方式不能同时享用</span>
        </div>
        <c:if test="${OrderFilling.CouponNum==0}">
	    	<ul class="discount-c">
           		<li class="float-l" >
                    <span class="word4 mar-b wor-colour1">优惠券</span>
                </li>
                <li class="float-r wor-colour1 right-yhq">无可用优惠券</li>
	    	</ul>
        </c:if>
        <c:if test="${OrderFilling.CouponNum!=0}">
        	<ul class="discount-b">
            	<li class="float-l">
                    <span class="word4 mar-b" onclick="_showFrameDiv('coupon');">优惠券</span>
                </li>
                <li id="couponLi" class="float-r wor-colour1 right-yhq" onclick="_showFrameDiv('coupon')">${OrderFilling.CouponNum}张可用</li>
         	</ul>
         </c:if>
         <c:if test="${OrderFilling.FreeRoomNum==0}">
		 	<ul class="discount-c">
				<li class="float-l" >
		 	 		<span class="word4 mar-b wor-colour1">免房券</span>
		 		</li>
		 		<li class="float-r wor-colour1 right-yhq ">无可用券</li>
		 	</ul>
	 	</c:if>
		<c:if test="${OrderFilling.FreeRoomNum!=0}">
			<ul class="discount-b">
		 		<li class="float-l" onclick="_showFrameDiv('free');">
		 	 		<span class="word4 mar-b">免房券</span>
		 		</li>
		 		<li id="freeLi" class="float-r wor-colour1 right-yhq" onclick="_showFrameDiv('free')">${OrderFilling.FreeRoomNum}张可用</li>
			</ul>
 		</c:if>
		<div class="discount-all">
			<span class="switch-button">礼遇券选择</span><span class="switch-explain word3 wor-colour1">您可以在离店前补选理遇券哦~</span>
		</div>
        <c:if test="${OrderFilling.DelayedNum==0}">
        	<ul class="discount-c">
    			<li class="float-l">
        	 		<span class="word4 mar-b wor-colour1" >延时券</span>
        	 		<input type="hidden" id="delayCoupon" value="0">
        		</li>
        		<li class="float-r wor-colour1 right-yhq">无可用券</li>
        	</ul>
        </c:if>
        <c:if test="${OrderFilling.DelayedNum!=0}">
			<ul class="discount-c">
				<li class="float-l">
			 		<span class="word4 mar-b">延时券</span><br>
			 		<span>${OrderFilling.DelayedNum}张延时券可用</span>
				</li>
				<li class="float-r wor-colour1 ">
					<div style="margin-right: 1em">
						<span onclick="changeDelay('0','${OrderFilling.DelayedNum}')"><img src="images/mult.png" style="height: 1.5em"></span>
							<input type="number" style="border: 1px solid #128e4b;border-radius: 4px;width:4em; " id="delayCoupon" value="0" onblur="blurDelay('${OrderFilling.DelayedNum}')">
						<span onclick="changeDelay('1','${OrderFilling.DelayedNum}')"><img src="images/add.png" style="height: 1.5em"></span>
					</div>
				</li>
			</ul>
        </c:if>
        <div class="remarks">
        	<%--<ul class="remarks-list">
             	<li class="float-l word4" onclick="_showFrameDiv('invoice')">发票</li>
                <li class="float-r wor-colour1" id="invoiceLi" onclick="_showFrameDiv('invoice')">
                	不需要发票
                </li>
            </ul>--%>
            <ul class="remarks-list">
             	<li class="float-l word4">备注</li>
                <li class="float-r"><input class="remark-input wor-colour1" id="otherRemarkInput" type="text" placeholder="输入您的其他要求" /></li>
            </ul>
		</div>
		<div class="remarks-bz bottom-t">
			<a href="#" class="remarks-xz" id="有孩子" onclick="choseRemark(this);return false">有孩子</a><a href="#" class="remarks-xz" id="有孕妇" onclick="choseRemark(this);return false">有孕妇</a><a href="#" class="remarks-xz" id="lr" onclick="choseRemark(this);return false">有老人</a><a href="#" class="remarks-xz" id="无烟"  onclick="choseRemark(this);return false">无烟</a>
			<a href="#" class="remarks-xz" id="高楼层" onclick="choseRemark(this);return false">高楼层</a><a href="#" class="remarks-xz" id="运电梯" onclick="choseRemark(this);return false">运电梯</a><a href="#" class="remarks-xz" id="qm" onclick="choseRemark(this);return false">荞麦枕</a><a href="#" class="remarks-xz" id="凝胶枕" onclick="choseRemark(this);return false">凝胶枕</a>
		</div>
	</div>
	<footer class="footer wor-height2" style="z-index: 998;">
	    <span class="foot-pay word8 wor-colour4" id="totalPrice">¥ ${OrderFilling.TotalPrice}</span>
	    <a href="#" class="wor-colour8" onClick="toshare();return false;">费用详细</a>
	    <a href="#" class="float-r footer-button" onclick="_submit();return false;" id="subBut">提交订单</a>
	   	<a href="#" class="float-r footer-button" id="lodBut" style="display:none;" onClick="return false;">正在提交订单</a>
	    <div class="am-share">
          <h3 class="am-share-title">费用明细</h3>
          <ul class="am-share-sns" id="priceList">
            <li><span class="float-l">入住${nightNum}晚房间总价</span><span class="float-r wor-colour4">¥ ${OrderFilling.TotalPrice}</span></li>
            <c:forEach var="info" items="${OrderFilling.PriceDetailList}">
            <li><span class="float-l">${info.DateStr}</span><span class="float-r wor-colour4">¥ ${info.RoomPrice}</span><span class="float-r">${info.RoomNum}间</span></li>
          	</c:forEach>
          </ul>
          <div class="am-share-footer"><button class="share_btn">取消</button></div>
        </div>
	</footer>
	<div class="frame_div" id="invoiceDiv">
		<iframe src="home/invoice?memKey=${memKey}" class="div_frame" id="invoiceFream"></iframe>
	</div>
	<div class="frame_div" id="occupantDiv">
		<iframe src="" class="div_frame" id="occupantFream"></iframe>
	</div>
	<div class="frame_div" id="couponDiv">
		<iframe src="home/coupon?hotelKey=${hotelKey}&reserveType=${reserveType}&roomTypeID=${roomTypeID}&startDate=${startDate}&endDate=${endDate}&memKey=${memKey}" class="div_frame" id="couponFream"></iframe>
	</div>
	<div class="frame_div" id="freeDiv">
		<iframe src="home/freeRoom?hotelKey=${hotelKey}&reserveType=${reserveType}&roomTypeID=${roomTypeID}&startDate=${startDate}&endDate=${endDate}&memKey=${memKey}" class="div_frame" id="freeFream"></iframe>
	</div>
	<div class="frame_div_back" id="frame_div_back">加载中</div>
<!-- 	<div class="frame_div" id="orderDiv">
		<iframe src="" class="div_frame" id="orderFream"></iframe>
	</div> -->
	<form id="submitForm" action="home/orderPayment1" method="post">
		<input type="hidden" id="startDate" name="startDate" value="${startDate}">
		<input type="hidden" id="endDate" name="endDate" value="${endDate}">
		<input type="hidden" id="hotelKey" name="hotelKey" value="${hotelKey}">
		<input type="hidden" id="reserveType" name="reserveType" value="${reserveType}">
		<input type="hidden" id="roomTypeID" name="roomTypeID" value="${roomTypeID}">
		<input type="hidden" id="couponCode" name="couponCode" value="${couponCode}">
		<input type="hidden" id="freeRoomCode" name="freeRoomCode" value="${freeRoomCode}">
		<input type="hidden" id="invoiceCode" name="invoiceCode" value="${invoiceCode}">
		<input type="hidden" id="remarks" name="remarks" value="">
		<input type="hidden" id="otherRemarks" name="otherRemarks" value="">
		<input type="hidden" id="roomNum" name="roomNum" value="1">
		<input type="hidden" id="guestPhone" name="guestPhone" value="${guestPhone}">
		<input type="hidden" id="guestList" name="guestList" value="">
		<input type="hidden" id="hotleName" name="hotleName" value="${hotleName}">
		<input type="hidden" id="roomName" name="roomName" value="${roomName}">
		<input type="hidden" id="memKey" name="memKey" value="${memKey}">
		
		<input type="hidden" value="${cityName}" id="cityName" name="cityName"/>
		<input type="hidden" value="${city}" id="city" name="city"/>
		<input type="hidden" value="${lng}" id="lng" name="lng"/>
		<input type="hidden" value="${lat}" id="lat" name="lat"/>
		<input type="hidden" value="${type}" id="type" name="type"/>
	</form>
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/artDialog/artDialog.source.js?skin=simple"></script>
<script type="text/javascript" src="js/artDialog/plugins/iframeTools.source.js"></script>
<script type="text/javascript" src="js/messages_zh.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script>	
	function div_hide(){
    	$("#invoiceDiv").hide();
    	$("#occupantDiv").hide();
    	$("#couponDiv").hide();
    	$("#freeDiv").hide();
    	$("#invoiceFream").hide();
    	$("#occupantFream").hide();
    	$("#couponFream").hide();
    	$("#freeFream").hide();
   	}
   	div_hide();
   function choseRemark(obj){
    	if($(obj).hasClass("selectA")){
    		$(obj).removeClass("selectA");
  			}else{
  				$(obj).addClass("selectA");
  			}
    }
    
    function _submit(){
    	div_hide();
	    if($("#contactPhoneInput").val()==null||$("#contactPhoneInput").val()==""){
	    	art.dialog.tips('请填写联系方式');
           }else{
    		var guestList="";
    		var guestnum=0;
    		$(".contactUser").each(function() {
    			if($(this).val()!=null&&$(this).val()!=""){
    				guestList+=$(this).val()+",";
    				guestnum++;
    			}
    		});
    		var roomNumVal=$("#roomNum").val();
    		if(guestnum!=roomNumVal){
    			art.dialog.tips("房间数和入住人数不一致！");
    		}else{
    			$("#subBut").hide();
    			$("#lodBut").show();
		    	$("#guestPhone").val($("#contactPhoneInput").val());
		    	$("#guestList").val(guestList);
	    		var remarks="";
	    		$(".remarks-xz").each(function() {
	    			if($(this).hasClass("selectA")){
	    				remarks+=$(this).attr("id")+",";
	    			}
	    		});
	    		$("#remarks").val(remarks);
	    		$("#otherRemarks").val($("#otherRemarkInput").val());
	    		
	    		//方式3 ajax
	    		$.ajax({
			        url:"<%=basePath%>home/orderPayment2",
			        type:"post",
			        data:"hotelKey="+$("#hotelKey").val()+"&startDate="+$("#startDate").val()+"&endDate="+$("#endDate").val()
				    	+"&reserveType="+$("#reserveType").val()+"&roomTypeID="+$("#roomTypeID").val()+"&hotleName="+$("#hotleName").val()+"&guestPhone="+$("#guestPhone").val()
				    	+"&roomName="+$("#roomName").val()+"&couponCode="+$("#couponCode").val()+"&freeRoomCode="+$("#freeRoomCode").val()+"&delayedNum="+$("#delayCoupon").val()
				    	+"&invoiceCode="+$("#invoiceCode").val()+"&remarks="+$("#remarks").val()+"&otherRemarks="+$("#otherRemarks").val()+"&roomNum="+$("#roomNum").val()
				    	+"&guestList="+$("#guestList").val(),
				    contentType: "application/x-www-form-urlencoded; charset=utf-8",
			        success:function(dataJson){
                            if(dataJson=="gotoRegister"){
			                 $("#submitForm").attr("action","home/gotoRegister").submit();
			             }else{
								var data=eval('(' + dataJson + ')');
								if(data.businessState!=0 ||data.businessState!=0){
									art.dialog.tips(data.msgInfo);
								}else{
									if(data.PayTotal==null||data.PayTotal==0){
										art.dialog.tips("下单成功！");
										setTimeout(function(){
											window.location.replace("order/getAllOrderList?ordState=1000");
										},1000);
									}else{
										   window.location.replace("home/orderPaymentDetail?ordCode="+data.OrdCode)
									}
								}
								//$("#lodBut").hide();
								//$("#subBut").show();
			        	}
			        },
			        error:function(e){
			            art.dialog.tips('操作异常！');
			            $("#lodBut").hide();
			            $("#subBut").show();
			        }
			    });
    		}
	    }
    }
    
    function roomNum(num){
    	$.ajax({
	        url:"<%=basePath%>home/getSurplusRoomNum",
	        type:"post",
	        data:{hotelKey:$("#hotelKey").val(),startDate:$("#startDate").val(),endDate:$("#endDate").val(),reserveType:$("#reserveType").val(),roomTypeID:$("#roomTypeID").val(),roomNum:num,memKey:$("#memKey").val()},
	        success:function(data){
	            if(data=="success"){
	                $("#roomNum").val(num);
	                showRoom(num);
	                getPrice();
	            }else if(data=="noRoom"){
	                art.dialog.tips('十分抱歉，房间已订满');
	                if(num==1){
	                	_back();
	                }
	            }
	        },
	        error:function(e){
	            art.dialog.tips('操作异常！');
	        }
	    });
    }
    function showRoom(num){
    	$(".between").addClass("between1");
    	$(".between").removeClass("between");
    	$("#between"+num).addClass("between");
    	$("#between"+num).removeClass("between1");
    	if(num==1){
    		$("#contactDiv2").hide();
    		$("#contactInput2").val("");
    		$("#contactDiv3").hide();
    		$("#contactInput3").val("");
    	}
    	else if(num==2){
    		$("#contactDiv2").show();
    		$("#contactDiv3").hide();
    		$("#contactInput3").val("");
    	}
    	else if(num==3){
    		$("#contactDiv2").show();
    		$("#contactDiv3").show();
    	}
    	
    	$("#roomNum").val(num);
    }
    function _showFrameDiv(type){
	    if(type=="occupant"){
	    	$("#occupantFream").attr("src","home/occupant?memKey="+$("#memKey").val());
	    }
		$("#frame_div_back").show();
		$("#"+type+"Div").show();
		$("#"+type+"Fream").show();
    }
    function _showOccFrameDiv(type){
    	var checkedMsg=$("#contactInput"+type).val();
    	$("#occupantFream").attr("src","home/occupant?memKey="+$("#memKey").val()+"&type="+type+"&checkedMsg="+checkedMsg);
    	$("#occupantFream").show();
		$("#frame_div_back").show();
    }
    function toshare(){
		$(".am-share").addClass("am-modal-active");	
		if($(".sharebg").length>0){
			$(".sharebg").addClass("sharebg-active");
		}else{
			$("body").append('<div class="sharebg"></div>');
			$(".sharebg").addClass("sharebg-active");
		}
		$(".sharebg-active,.share_btn").click(function(){
			$(".am-share").removeClass("am-modal-active");	
			setTimeout(function(){
				$(".sharebg-active").removeClass("sharebg-active");
				$(".sharebg").remove();	
			},300);
		});
	}	
	
   	function _back(){
   		$("#submitForm").attr("action","home/hotelDetails").submit();
   	}
   	
   	function getPrice(){
   		$.ajax({
	        url:"<%=basePath%>home/getOrdPrice",
	        type:"post",
	        data:{hotelKey:$("#hotelKey").val(),startDate:$("#startDate").val(),endDate:$("#endDate").val(),reserveType:$("#reserveType").val(),
	        roomTypeID:$("#roomTypeID").val(),roomNum:$("#roomNum").val(),memKey:$("#memKey").val(),freeRoomCode:$("#freeRoomCode").val(),couponCode:$("#couponCode").val()},
	        success:function(dataJson){
	            if(dataJson=="error"){
	                art.dialog.tips('价格计算失败');
	            }else{
	            	data=eval('(' + dataJson + ')');
            		var totalPrice=data.TotalPrice;
            		var priceDetailList=data.PriceDetailList;
            		$("#totalPrice").html("￥"+totalPrice);
            		var html='<li><span class="float-l">入住'+$("#nightNumSpan").html()+'晚房间总价</span><span class="float-r wor-colour4">¥'+totalPrice+'</span></li>';
            		for(var i=0;i<priceDetailList.length;i++){
            			html+='<li><span class="float-l">'+priceDetailList[i].DateStr+'</span><span class="float-r wor-colour4">¥ '+priceDetailList[i].RoomPrice+'</span><span class="float-r">'+priceDetailList[i].RoomNum+'间</span></li>';
            		}
            		$("#priceList").html(html);
	            }
	        },
	        error:function(e){
	            art.dialog.tips('价格计算异常！');
	        }
	    });
   	}


   	function changeDelay(flag,num){
       var delayCoupon = $("#delayCoupon").val();

       var result = 0;
       if(delayCoupon==null){
              delayCoupon=parseInt(0);
	   }
       if(flag==0){
              result = parseInt(delayCoupon)-1;
	   }else if(flag==1){
              result = parseInt(delayCoupon)+1;
	   }
	   if(result<0){
              result = 0;
	   }
	   if(result>num){
              result=num;
              art.dialog.tips('不可超过可用延时卷');
	   }
           $("#delayCoupon").val(result);
	}

	function blurDelay(num){
           var result = 0;
           var delayCoupon = $("#delayCoupon").val();
           if(parseInt(delayCoupon)>parseInt(num)){
               result=num;
               $("#delayCoupon").val(result);
               art.dialog.tips('不可超过可用延时卷');
           }
	}
   	    	
   	//初始化计算房间数
   	//roomNum(1);
</script>

        
</html>
